'use strict';

/* 
	主页-功能面板

 */
var React = require('react-native');

var {
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity
} = React;


var Item = React.createClass({
	render: function() {
		return (
			<TouchableOpacity style={styles.item} onPress={this.gotoProductList}>
				<Image style={styles.itemImage} source={{uri:this.props.imgUrl}}/>
				<Text style={styles.itemTitle}>{this.props.title}</Text>
			</TouchableOpacity>
		)
	},
	gotoProductList: function() {
		this.props.navigator.push({
			name: 'ProductListView'
		});
	}
})

module.exports = React.createClass({

	propTypes: {
		navigator: React.PropTypes.object.isRequired
	},

	render: function() {

		return (
			<View style={styles.container}>
				<View style={styles.row}>
					<Item navigator={this.props.navigator} title="天猫" imgUrl="https://gw.alicdn.com/tps/i1/TB1eSyDGFXXXXaRXVXXszjdGpXX-140-140.png"></Item>
					<Item navigator={this.props.navigator} title="聚划算" imgUrl="https://gw.alicdn.com/tps/i3/TB1unlMIVXXXXauXXXXszjdGpXX-140-140.png"></Item>
					<Item navigator={this.props.navigator} title="淘生活" imgUrl="https://gw.alicdn.com/tps/i2/TB1oq4xHXXXXXbxXpXXszjdGpXX-140-140.png"></Item>
					<Item navigator={this.props.navigator} title="淘点点" imgUrl="https://gw.alicdn.com/tps/i3/TB1QeiDGFXXXXb8XVXXszjdGpXX-140-140.png"></Item>
				</View>
				<View style={styles.row}>
					<Item navigator={this.props.navigator} title="充值" imgUrl="https://gw.alicdn.com/tps/i3/TB1pAV7HXXXXXX5aXXXszjdGpXX-140-140.png"></Item>
					<Item navigator={this.props.navigator} title="阿里旅行" imgUrl="https://gw.alicdn.com/tps/i1/TB1z8qiHpXXXXceaXXXszjdGpXX-140-140.png"></Item>
					<Item navigator={this.props.navigator} title="领金币" imgUrl="https://gw.alicdn.com/tps/i3/TB1hW9KGFXXXXXLXpXXszjdGpXX-140-140.png"></Item>
					<Item navigator={this.props.navigator} title="分类" imgUrl="https://gw.alicdn.com/tps/i4/TB1Ed9LGFXXXXc3XXXXszjdGpXX-140-140.png"></Item>
				</View>
			</View>
		)
	}

})


var styles = StyleSheet.create({
	container: {
		flex: 1,

	},
	row: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		marginVertical: 10,
	},
	item: {
		alignItems: 'center',
	},
	itemImage: {
		width: 50,
		height: 50,
	},
	itemTitle: {

	}
});